<!--
 * @Author: 宋绍华
 * @Date: 2024-11-13 16:11:56
 * @LastEditors: 宋绍华
 * @LastEditTime: 2024-12-17 17:15:00
 * @FilePath: \sr_system_manager_ui\src\views\project\components\MyProject\Step.vue
 * @Description: 
-->
<template>
  <div class="step">
    <div v-for="(item, idx) in stepList" :key="item.id" :class="`step-item-${item.status}`" class="step-item">
      <div class="step-item-title"><span class="step-item-num">0{{ idx + 1 }}</span>{{ item.title }}</div>
      <div class="step-item-line iconfont"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  stepNum: {
    type: Number,
    default: 0
  }
})

const stepList = ref([
  {
    title: '基本信息',
    status: '',
    id: 0,
  },
  {
    title: '项目成员',
    status: '',
    id: 1
  },
  {
    title: '合作单位',
    status: '',
    id: 2
  },
  {
    title: '预算信息',
    status: '',
    id: 3
  },
  {
    title: '项目文档',
    status: '',
    id: 4
  },
  {
    title: '完成',
    status: '',
    id: 5
  },
])

watch(
  () => props.stepNum,
  () => {
    // 根据stepNum 来改变stepList的状态，如果stepNum 等于4，则所有的stepList都改为done，否则小于stepNum的全部改为done, 等于stepNum的改为doing，大于stepNum的改为''。
    if (props.stepNum === 5) {
      stepList.value.forEach((item,) => {
        item.status = 'done'
      })
    } else {
      stepList.value.forEach((item, index) => {
        if (index < props.stepNum) {
          item.status = 'done'
        } else if (index === props.stepNum) {
          item.status = 'doing'
        } else {
          item.status = ''
        }
      })
    }

  }, {
  immediate: true
}
)
</script>
<style scoped lang='scss'>
.step {
  --at-apply: h-156px ml-7%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  &-item {
    --at-apply: flex justify-center w-full h-full flex-col;

    &-title {
      --at-apply: text-16px text-#1D2129 flex items-center mb-12px;
    }

    &-num {
      --at-apply: text-20px text-#1D2129 font-bold mr-14px inline-block;
    }

    &-line {
      --at-apply: relative h-28px;

      &::after {
        --at-apply: absolute ml-28px left-50% top-50% h-1px w-80% bg-#E5E6EB content-empty;
        transform: translate(-56%, -50%);
      }

      &::before {
        --at-apply: h-28px w-28px border-4px rounded-full border-#E5E6EB border-solid absolute left-0 top-0 content-empty;
      }
    }

    &:last-child {
      .step-item-line {
        &::after {
          --at-apply: hidden;
        }
      }
    }

    &-doing {
      .step-item-line {
        &::after {
          --at-apply: border-dashed border-[0.5px] border-#57A9FB;
        }

        &::before {
          --at-apply: border-#57A9FB;
        }
      }
    }

    &-done {
      .step-item-line {
        &::after {
          --at-apply: bg-#57A9FB;
        }

        &::before {
          --at-apply: border-none text-32px mt-[-12px] color-#57A9FB;
          content: "\e05d";
        }
      }
    }
  }
}
</style>